<template>
  <div class="admin-content-left">
    <div class="work-publish">
      <span style="font-size: 16px">任务完成周期：</span>
      <div class="publish-top">
        <div class="date-picker">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator=" "
            start-placeholder="开始"
            end-placeholder="结束"
            align="right"
          >
          </el-date-picker>
        </div>
        <div class="group-checkbox">
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <span style="position: relative; top:10px"> 作业详情：</span>
    <div class="week-checkbox">
          <el-select v-model=" weekNumber" placeholder="请选择">
            <el-option
              v-for="item in  weekOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      <textarea class="job-detail" placeholder="请输入内容" v-model="textarea" cols="34" rows="12">
      </textarea>
      <button class="publish-button" @click="onClick">任务发布</button>
    </div>
  </div>
</template>

<script>
import {ChineseTransformGreenwich} from '../../utils/date'
import {weekToBeWorkName} from '../../utils/work'
import {directionOptionList,weekStageList} from '../../data/admin'
export default {
  data() {
    return {
      value1: '', //方向选择值
      textarea: '',
      value2: '', //日期值
      options: directionOptionList,
    weekNumber:'',
    weekOptions:weekStageList
    };
  },
  methods: {
    onClick () {
      console.log('ISOtime', this.value2);
       if(!this.value2){
           this.$message.error('请先选择作业日期')
            return
        }
       if(!this.value1){
           this.$message.error('请先选择方向')
            return
        }
    let [start,stop]=this.value2
    start=ChineseTransformGreenwich(start)
    stop=ChineseTransformGreenwich(stop)
    console.log(start,stop)
      let that = this;
      let work = {
        name: `适应期第${weekToBeWorkName(this.weekNumber)}周作业`,
        start,
        stop,
        message: that.textarea,
        direction: that.value1,
        week:this.weekNumber
      };
      this.$api.adminApi.updateWork(work).then((params) => {
        console.log(params)
        if(params.status==200){
            this.$message.success('发布成功')
        }else{
            this.$message.error('发布失败')
        }
      });
    },
  },
  created() {
    // console.log(this.textarea);
  },
};
</script>

<style lang="less" scoped>
.job-detail {
 position: relative; 
  border: #c2c7f4 solid 2px;
  background: #c2c7f4; //  背景透明
  border-radius: 5px;
  font-family: '黑体', Courier, monospace;
  display: inline-block;
  width: 100%;
}
.admin-content-left {
  width: 22%;
  height: 94vh;
  // background-color:blue;
  background-image: url('~@/assets/img/admin/leftback.png');
  background-size: 100% 100%;
  border-radius: 20px;
  position: relative;
}

.work-publish {
  // background-color: red;
  height: 44vh;
  width: 80%;
  position: absolute;
  left: 30px;
  top: 15vh;
  opacity: 0.8;
}
.publish-top {
  // background-color: red;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.work-publish span {
  font-size: 16px;
  color: #4a1691;
  font-family: 黑体;
  line-height: 40px;
  font-weight: bold;
}
:deep(.el-date-editor) {
  --el-date-editor-datetimerange-width: 80%;
}
:deep(.el-input__wrapper ){
  --el-input-bg-color: #c2c7f4;
  // --el-border-radius-base: 8px;
}
:deep(.el-textarea) {
  --el-input-bg-color: #c2c7f4;
  --el-border-radius-base: 8px;
}
:deep(.el-textarea__inner) {
  --el-input-bg-color: #c2c7f4;
  --el-border-radius-base: 8px;
}
.publish-button {
  width: 100%;
  height: 5vh;
  margin-top: 10px;
  background-color: #f0ecfc;
  background-image: linear-gradient(315deg, #f0ecfc 0%, #c2c7f4 74%);
  line-height: 42px;
  border-radius: 8px;
  border: 0px;
  color: #4a1691;
  font-family: 黑体;
  line-height: 35px;
  font-weight: bold;
  font-size: 16px;
  transition: 0.5s;
}
.publish-button:hover {
  opacity: 0.8;
  transform: scale(0.9);
}
.group-checkbox {
  width: 100%;
}
.week-checkbox{
    position: relative;
    top:-20px;
    width: 40%;
    left: 155px;
}
:deep( .el-select) ,
:deep(.el-input)  ,
:deep(.el-input__inner){
  background-color: #c1caf3;
  color: grey;
  border: 2px;
  border-radius: 30px;
  text-align: center;
}
//修改单个的选项的样式
:deep( .el-select-dropdown__item ){
  background-color: #c1caf3;
  color: #c1caf3;
}

//item选项的hover样式
:deep( .el-select-dropdown__item.hover),
:deep( .el-select-dropdown__item:hover) {
  color: #409eff;
}

//修改的是下拉框选项内容上方的尖角
/* /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
    
  } */
:deep(.el-input) {
  --el-fill-color-blank: #c1caf3;
}
:deep(.el-popper ){
  --el-color-primary: #c1caf3;
}
</style>
